import React, { Component } from 'react';
import { connect } from "react-redux";
import { NavBar, Button } from "antd-mobile";
import "./ordercomment.scss"
import styles from "./OrderComment.module.scss";
import { ImagePicker } from 'antd-mobile';
import { AddCommentImgAction, AddTextAction, AddFoodSorceAction, AddHorsemanCommentAction } from "../../store/actionCreator/orderActionCreator/";
import Lazy from "../../utils/imgLazyLoad";

class OrderComment extends Component {
    render() {
        return (
            <div className={`${styles.commentPage} commentPage`}>
                <NavBar
                    mode="light"
                    leftContent={
                        <svg className="icon" aria-hidden="true">
                            <use href="#icon-zuojiantou-copy"></use>
                        </svg>
                    }
                >评论</NavBar>
                <div className={`${styles.deliveryComment} ${styles.commoncss}`}>
                    <div className={styles.commentTop}>
                        <div className={styles.topImg}>
                            <svg className="icon" aria-hidden="true">
                                <use href="#icon-icon-test1"></use>
                            </svg>
                        </div>
                        <h3>{this.props.horseman.name}</h3>
                        <span>已对骑手匿名</span>
                    </div>
                    <div className={styles.commentContent}>
                        {
                            this.props.smiles.map((v,i)=>{
                                return (
                                    <div key={v.id} onClick={()=>{
                                        this.props.addHorsemanComment(i)
                                    }}>
                                        <svg className="icon" aria-hidden="true">
                                            <use href={v.face}></use>
                                        </svg>
                                        <span>{v.text}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                <div className={`${styles.foodComment} ${styles.commoncss}`}>
                    <div className={styles.commentTop}>
                        <div className={styles.topImg}>
                            <Lazy src={this.props.shopimg} alt={"imgerr"}></Lazy>
                        </div>
                        <h3>{this.props.shop}</h3>
                        <span>匿名</span>
                    </div>
                    <div className={styles.commentContent}>
                        <div className={styles.stars}>
                            {this.props.stars.map(v=>{
                                return <span key={v.id} 
                                onClick={()=>{this.props.addFoodSorce(v.id)}}>
                                    <svg className="icon" aria-hidden="true">
                                        <use href={v.star}></use>
                                    </svg>
                                </span>
                            })}
                        </div>
                        <div className={styles.commentText}>
                            <textarea placeholder="说说哪里好，其他顾客想知道" onChange={
                                (e)=>{
                                    this.props.addText(e.target.value)
                                }
                            }></textarea>
                            <div className={styles.imgPicker}>
                            <ImagePicker
                            length="4"
                            files={this.props.files}
                            onChange={(file,type,index)=>{
                                this.props.addImg(file)
                            }}
                            onImageClick={(index,fs)=>{
                                console.log(index,fs)
                            }}
                            selectable={this.props.files.length<4}
                            onAddImageClick={(e)=>{
                                // console.log(e)
                                // this.props.addImg();
                            }}
                            disableDelete
                            />
                        </div>
                        </div>
                    </div>
                </div>
                <div className={styles.btnBox}>
                    <Button 
                    type="primary"
                    disabled={this.props.isrefer === false}>default disabled</Button>
                </div>
            </div>
        )
    }
}
const mapStateToProps = (state)=>{
    return {
        horseman:state.orderDetailReducer.orderDetail.horseman,
        shop:state.orderDetailReducer.orderDetail.shop,
        shopimg:state.orderDetailReducer.orderDetail.imgUrl,
        files:state.orderDetailReducer.ordercomment.imgfiles,
        stars:state.orderDetailReducer.stars,
        smiles:state.orderDetailReducer.smiles,
        isrefer:state.orderDetailReducer.isrefer
    }
}
const mapDispatchToProps = (dispatch)=>{
    return {
        addImg:function(file){
            dispatch(AddCommentImgAction(file))
        },
        addText:function(text){
            dispatch(AddTextAction(text))
        },
        addFoodSorce:function(id){
            dispatch(AddFoodSorceAction(id))
        },
        addHorsemanComment:function(index){
            dispatch(AddHorsemanCommentAction(index))
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(OrderComment)